<template>
  <div>
      <el-dialog v-model="props.showStudent" :title="title" width="50%" :before-close="StudenthandleClose">
          <!-- 内容 -->

          <div class="top">
          
            <!-- 部门 -->
            <span>部门：</span>
            <div style="margin-right: 20px;">
              <el-select class="m-2" v-model="departmentValue" placeholder="请选择部门" @change="depChange">
                <el-option v-for="item in department" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <span>班级：</span>

            <!-- 班级 -->
            <div style="margin-right: 20px;">
              <el-select class="m-2" v-model="classVal" placeholder="请选择部门" @change="classChange">
                <el-option v-for="item in classArr" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          
          </div>

          <!-- 穿梭框 -->
          <div style="margin-top:30px; margin-left: 50px;">
            <el-transfer v-model="id" :left-default-checked="id" @left-check-change="leftcheckChange"
              @right-check-change="rightcheckChange" :titles="['未选', '已选']" :props="{
                              key: 'id',
                              label: 'name',
                              }" :data="datas">
              <template #default="{ option }">
                <span>{{ option.name }}</span>
              </template>
            </el-transfer>
          </div>



          <!-- dialog功能 -->
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="StudentCancels">取消</el-button>
                  <el-button type="primary" @click="StudentConfirms">确定</el-button>
              </span>
          </template>
      </el-dialog>
  </div>
</template>
<script lang='ts' setup>
import { ref, toRefs, onMounted, onUpdated, reactive } from 'vue'
import { department_list,classes_list,student_list } from "../../api/test"; //接口

const props = defineProps(['showStudent', 'params2']) //父传子
const emit = defineEmits(['StudenthandleClose', 'StudentConfirms', 'StudentCancels']) //子传父

// 差号
const StudenthandleClose = () => {
  emit('StudenthandleClose', false)
}


// 标题
let title = ref('考生范围')


//  部门 班级 穿梭框 《联动》---------------------------------------------

// 部门
let departmentValue = ref('') //当前选中的
let department:any = ref([])  //赋值的
let getdepartment = async() => {
  let res:any = await department_list ({page:1,psize:100})
  department.value = res.data.list
}
getdepartment()

// 点击部门 获取id  因为班级要部门的id
let depid = ref(0)
let depChange = (val:any) => {
  depid.value = val
  getclasses() //班级接口 刷新数据
}


// 班级---------------------------------------------
let classVal = ref('') //当前选中的
let classArr:any = ref([]) //赋值的
let getclasses = async() => {
  let res = await classes_list({page:1,psize:100,depid:depid.value})
  classArr.value = res.data.list
}
getclasses()

// 点击班级 获取id  因为穿梭框要班级的id
let classid = ref(0) 
let classChange = (val:any) => {
  // console.log(val);
  classid.value = val
  getstudent() //穿梭框
}


// 穿梭框 数据-------------------------------------------------
let datas = ref([])

let getstudent = async() => {
  let res = await student_list({page:1,psize:100,depid:depid.value,classid:classid.value})
  console.log(res);
  datas.value = res.data.list
}
getstudent()

// 穿梭框 已选 未选
let id:any = ref([])
const leftcheckChange = (val: any) => {   //已选
    id.value = [...id.value, ...val]
}
const rightcheckChange = (val: any) => {   //未选
    if (val.length > 0) {
        id.value = id.value.filter((item: any) => item != val[0])
    }
}



// 确定按钮
let markteachers = ref([]) // id

const StudentConfirms = () => {
  markteachers.value = id.value.map((item: any) => ({ studentid: item })) //数据
  // console.log(markteachers.value);

  emit('StudentConfirms', false,markteachers.value)
}
// 取消按钮
const StudentCancels = () => {
  emit('StudentCancels', false)
}



</script>
<style lang="less" scoped>
.top{
  display: flex;
  align-items: center;
}
:deep(.el-transfer__buttons) {
  display: none;
}

:deep(.el-transfer) {
  --el-transfer-panel-width: 264px;
  display: flex;
}

:deep(.el-transfer-panel) {
  margin-right: 30px;
  // margin-left: 4px;
}
</style>